<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>楼栋管理</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Bootstrap Multiselect CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css"
          rel="stylesheet">
    <style>
        .form-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="container form-container">
    <div class="card">
        <div class="card-header bg-success text-white">  <!-- 修改bg-primary为bg-success -->
            <h5 class="mb-0">楼栋管理</h5>
        </div>
        <div class="card-body">
            <form id="buildingForm">  <!-- 添加表单ID -->
                <div class="mb-3">
                    <label class="form-label">管理楼栋</label>
                    <select class="selectpicker form-control" data-live-search="true" id="buildingSelect" multiple
                            title="请选择楼栋">
                        <!--                        <option value="1">楼栋1</option>-->
                        <!--                        <option value="2">楼栋2</option>-->
                        <!--                        <option value="3">楼栋3</option>-->
                    </select>
                </div>

                <div>
                    <button class="btn btn-success me-2" type="submit">保存</button>
                    <!--                    <button type="button" class="btn btn-secondary" id="resetBtn">重置</button>  &lt;!&ndash; 修改为type="button"并添加ID &ndash;&gt;-->
                </div>
            </form>
        </div>

    </div>
</div>

<!-- 引入jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 引入Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入Bootstrap Multiselect JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

<script>
    $(document).ready(function () {
        // 初始化多选下拉框
        $('.selectpicker').selectpicker();

        // 加载楼栋数据
        $.ajax({
            url: "/admin/stuff/buildsDetails",
            type: "get",
            dataType: "json",
            success: function (res) {
                if (res.code === 200) {
                    var options = '';
                    $.each(res.data, function (index, item) {
                        options += '<option value="' + item.buildingId + '" ' + (item.checked ? 'selected' : '') + '>' + item.buildingNumber + '</option>';
                    });
                    $('.selectpicker').html(options);
                    $('.selectpicker').selectpicker('refresh');
                }
            }
        });

        $('#resetBtn').click(function () {
            $('#buildingSelect').val(null);  // 清空选择
            $('#buildingSelect').selectpicker('refresh');  // 刷新下拉框状态
        });

        //从url获取管家的id
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return false;
        }

        var orderId = getQueryVariable('id');
        console.log(orderId)
        // 表单提交
        $('form').on('submit', function (e) {
            e.preventDefault();
            var selectedBuildings = $('.selectpicker').val();
            console.log(selectedBuildings)
            $.ajax({
                url: '/admin/stuff/updateManageBuilds',
                type: 'post',
                traditional: true, // 设置传统的序列化方式
                data: {
                    managerId: orderId,
                    buildingIds: selectedBuildings
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 200) {
                        alert('保存成功');
                    } else {
                        alert(res.msg || '保存失败');
                    }
                }
            });
        });
    });
</script>
</body>
</html>
